<template>
    <div class="login">
        <slot name="header">
            <h2>登录</h2>
        </slot>
        <div class="input_wrapper">
            <div class="inputItem" :class="{'focus':isFocus.username,'username_error':errorFlag.username}">
                <img :src=icons.username_icon alt="" class="icon">
                <div class="inputContent">
                    <input type="text" @focus="focus('username')" @blur="blur('username')" @input="inputUsername" ref="username" placeholder="请输入用户名" v-model="input_info.username" autofocus>
                </div>
            </div>
            <div class="inputItem" :class="{'focus':isFocus.password,'password_error':errorFlag.password}">
                <img :src=icons.password_icon alt="" class="icon" @click="switchVisible">
                <div class="inputContent">
                    <input type="password" @focus="focus('password')" @blur="blur('password')" ref="password" placeholder="请输入密码" v-model="input_info.password">
                </div>
            </div>
        </div>

        <div class="auto_quickLogin">
            <div v-if="mConfigs.rememberPassword" class="autoLogin_wrapper">
                <input type="checkbox" id="radio" hidden v-model="checked" @click="isChecked()">
                <label for="radio" class="autoLogin"></label>
                <span>记住密码</span>
            </div>
            <div v-if="mConfigs.rememberPassword && mConfigs.quickLogin" class="quickLogin" @click="$emit('phoneLogin')">
                手机快捷登录
            </div>
        </div>
        <div>
            <button :class="{'opt_button':!isLoginForbidden,'forbidden':isLoginForbidden}" :disabled="isLoginForbidden" @click="clickLogin()">
                {{mConfigs.login_btn_value}}
            </button>
        </div>

        <div v-if="!mConfigs.forgetPassword && mConfigs.register">
            <button @click="$emit('register')" class="registerBtn">注册</button>
        </div>

        <div v-if="!mConfigs.rememberPassword && mConfigs.quickLogin">
            <button @click="$emit('phoneLogin')" class="phoneLogin">{{mConfigs.phone_login_text}}</button>
        </div>

        <div class="forgetPwd_register_protocol" v-if="mConfigs.forgetPwd_register_protocol" :class="{'footer':(mConfigs.forgetPassword||mConfigs.register||mConfigs.protocol)&&!mConfigs.otherLoginWays}" v-show="hideFooter">
            <div class="forgetPwd_register" :class="{'space_between':mConfigs.forgetPassword&&mConfigs.register}">
                <div class="forget_password" v-if="mConfigs.forgetPassword" @click="$emit('forgetPassword')">
                    忘记密码
                    <span v-if="!mConfigs.register">?</span>
                </div>
                <div class="separator" v-if="mConfigs.forgetPassword && mConfigs.register">
                    |
                </div>
                <div class="register" v-if="mConfigs.forgetPassword && mConfigs.register" @click="$emit('register')">
                    用户注册
                </div>
            </div>
            <div class="protocol" v-if="mConfigs.protocol && mConfigs.forgetPassword">
                登录注册即代表阅读并同意<b @click="$emit('toProtocol')">服务协议</b>
            </div>
        </div>

        <div class="otherLoginWays" v-if="mConfigs.otherLoginWays" v-show="hideFooter">
            <div class="otherWayTextWrapper">
                <div class="otherWayText">其他登录方式</div>
            </div>
            <div class="icons">
                <slot name="otherLoginWays_icons">
                    <img class="icon" src="../assets/images/icon_QQ.png" @click="$emit('qqLogin')">
                    <img class="icon" src="../assets/images/icon_weixin.png" @click="$emit('weixinLogin')">
                    <img class="icon" src="../assets/images/icon_weibo.png" @click="$emit('weiboLogin')">
                </slot>
            </div>
        </div>
        <div class="protocol" v-if="mConfigs.protocol && (!mConfigs.forgetPwd_register_protocol || !mConfigs.forgetPassword)" v-show="hideFooter">
            登录注册即代表阅读并同意<span @click="$emit('toProtocol')">用户服务协议</span>
        </div>
    </div>
</template>

<script>
    export default {
        name: "bm_login",
        data(){
            return{
                visible:false,
                checked:false,
                input_info:{
                    username:"",
                    password:""
                },
                isFocus:{
                    username:false,
                    password:false
                },
                errorFlag:{
                    username:false,
                    password:false
                },
                timer:false,
                isLoginForbidden:true,
                hideFooter:true,
                docmHeight: document.documentElement.clientHeight || document.body.clientHeight,
                showHeight: document.documentElement.clientHeight || document.body.clientHeight,
            }
        },

        watch: {
            //监听显示高度
            showHeight:function() {
                this.hideFooter = this.docmHeight <= this.showHeight;
            },
            //监听输入框输入内容
            input_info:{
                deep:true,
                handler:function(newValue,oldValue){
                    if (newValue){
                        this.isLoginForbidden = (!(newValue.password !== "" && newValue.username !== ""));
                    } else if (oldValue) {
                        this.isLoginForbidden = false;
                    }
                }
            },

        },

        props:['baseConfig','iconsBase64'],
        computed:{
            //合并父组件的传入值与默认值
            mConfigs(){
                return Object.assign({
                    forgetPwd_register_protocol: true,
                    forgetPassword:true,
                    register:true,
                    protocol:true,
                    // rememberPassword:true,
                    quickLogin:true,
                    otherLoginWays: true,
                    login_btn_value:'登录',
                    phone_login_text:'用短信验证码登录'
                },this.baseConfig)
            },
            icons(){
                return Object.assign({
                    username_icon:"",
                    username_blur:"",
                    username_active:"",
                    password_icon:"",
                    password_active:"",
                    password_hidden:"",
                    password_visiable:"",
                },this.iconsBase64)
            }
        },

        mounted() {
            // if (this.mConfigs.rememberPassword) {  //如果用户选择了记住密码功能
            //     //获取cookie值
            //     this.getCookie();
            //     //获取用户上一次的选择
            //     this.checked = sessionStorage.getItem('isChecked') === "true";
            // }
            //监听事件
            window.onresize = ()=>{
                return(()=>{
                    this.showHeight = document.documentElement.clientHeight || document.body.clientHeight;
                })()
            }
        },
        methods:{
            inputUsername(e) {
                console.log(e);
            },
            isChecked(){
                this.checked = !this.checked;
                this.$emit('parent_rememberMe', this.checked);
                // if (document.cookie.indexOf("userName") > -1 && document.cookie.indexOf("userPwd") > -1 && !this.checked){
                //     this.clearCookie();
                //     this.input_info.password = "";
                // }
            },
            clickLogin(){
                // let that = this;
                // if (that.checked === true){
                //     //保存七天
                //     that.setCookie(that.input_info.username,that.input_info.password,7);
                //     //保存用户此次选择
                //     sessionStorage.setItem('isChecked',"true");
                // } else{
                //     that.clearCookie();
                //     sessionStorage.setItem('isChecked',"false");
                // }
                //发送请求
                this.$emit('parent_login',this.input_info);
            },
            //设置cookie
            // setCookie(c_name, c_pwd, exdays) {
            //     let exdate = new Date(); //获取时间
            //     exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
            //     //字符串拼接cookie
            //     window.document.cookie = "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
            //     window.document.cookie = "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
            // },
            //读取cookie
            // getCookie: function() {
            //     if (document.cookie.length > 0) {
            //         let arr = document.cookie.split('; '); //这里显示的格式需要切割一下自己可输出看下
            //         // console.log(arr);
            //         for (let i = 0; i < arr.length; i++) {
            //             let arr2 = arr[i].split('='); //再次切割
            //             //判断查找相对应的值
            //             if (arr2[0] === 'userName') {
            //                 this.input_info.username = arr2[1]; //保存到保存数据的地方
            //             } else if (arr2[0] === 'userPwd') {
            //                 this.input_info.password = arr2[1];
            //             }
            //         }
            //     }
            // },
            //清除cookie
            // clearCookie: function() {
            //     this.setCookie("", "", -1); //修改2值都为空，天数为负1天
            // },
            focus(type){
                //聚焦输入框
                if (type === "username"){
                    this.isFocus.username = true;
                    this.icons.username_icon = this.icons.username_active;
                    this.errorFlag.username = false;
                } if (type === "password"){
                    this.isFocus.password = true;
                    this.icons.password_icon = this.icons.password_active;
                    this.errorFlag.password = false;
                }

            },
            blur(type){
                //输入框失焦
                if (type === "username") {
                    this.isFocus.username = false;
                    this.icons.username_icon = this.icons.username_blur;
                    //判空
                    let username_value = this.$refs.username.value;
                    this.errorFlag.username = username_value === "" || username_value === null || username_value === undefined;
                } if (type === "password"){
                    this.isFocus.password = false;
                    this.icons.password_icon = this.icons.password_hidden;
                    this.$refs.password.setAttribute("type","password");
                    //判空
                    let password_value = this.$refs.password.value;
                    this.errorFlag.password = password_value === "" || password_value === null || password_value === undefined;
                }
            },
            switchVisible(){
                //密码框自动聚焦
                this.$refs.password.focus();
                //输入框为空则显示错误信息
                let password_value = this.$refs.password.value;
                if (password_value === "" || password_value === null || password_value === undefined){
                    this.errorFlag.password = true;
                } else {
                    //切换密码是否可见的状态
                    if(!this.visible){
                        this.visible = true;
                        this.icons.password_icon = this.icons.password_visiable;
                        this.$refs.password.setAttribute("type","text");
                    }else {
                        this.visible = false;
                        this.icons.password_icon = this.icons.password_hidden;
                        this.$refs.password.setAttribute("type","password");
                    }
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    @mainColor: #007cdc;
    .gradient{
        background-image: linear-gradient(to right,@mainColor,lighten(@mainColor,18%));
    }
    .login{
        width: 80%;
        margin: 33% auto;
        text-align: center;
        h2{
            color: #666666;
            font-size: 1.6rem;
        }
        //用户名、密码输入框
        .input_wrapper{
            .inputItem{
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                position: relative;
                margin-top: 1.42rem;
                &::after{
                    content: "";
                    position: absolute;
                    height: 1px;
                    width: 100%;
                    bottom: 0;
                    transform: scaleY(.5);
                    background: #bfbfbf;
                }

                img{
                    width: 1.2rem;
                    height: 1.2rem;
                }

                .inputContent{
                    padding: .4rem;
                    input{
                        font-size: 1.11rem;
                        border: none;
                        outline: none;
                        width: 90%;
                        letter-spacing: .1rem;
                        &::placeholder{
                            color: #aaaaaa;
                        }
                    }
                }
            }
            .focus::after{
                background: @mainColor;
            }
            .username_error::after{
                content: '用户名不能为空';
                background: red;
                transform: scaleY(1);
                font-size: .72rem;
                color: red;
                text-align: right;
                line-height: 1.6rem;
            }
            .password_error::after{
                content: '密码不能为空';
                background: red;
                transform: scaleY(1);
                font-size: .72rem;
                color: red;
                text-align: right;
                line-height: 1.6rem;
            }
        }
        //登录按钮
        button{
            .gradient;
            border: none;
            outline: none;
            width: 100%;
            position: relative;
            color: white;
            border-radius: 1.2rem;
            padding-top: .42rem;
            padding-bottom: .42rem;
            margin-top: 5%;
            font-size: 1.111rem;
            overflow: hidden;
            letter-spacing: .6rem;
            text-indent: .6rem;
            text-align: center;
            outline: 0;
        }
        .opt_button{
            cursor: pointer;
            &::after{
                content: "";
                background: #fff;
                display: block;
                position: absolute;
                width: 200%;
                height: 200%;
                top: -5%;
                border-radius: 50px;
                margin-left: -80%;
                opacity: 0;
                transition: all 0.75s ease-in-out;
            }
            &:active::after {
                width: 0;
                opacity: 0.6;
                transition: 0s;
            }
        }
        .forbidden{
            background: tint(@mainColor,70%);
            color: fade(white,80%);
        }

        .auto_quickLogin{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            font-size: .72rem;
            margin-top: 10%;
            color: #333333;
            .autoLogin_wrapper{
                .autoLogin{
                    display: inline-block;
                    width: 12px;
                    height: 12px;
                    background-image: url("../assets/images/unchosen.png");
                    background-size: 12px 12px;
                    background-repeat: no-repeat;
                    background-position: center;
                    vertical-align: middle;
                }
                input[type="checkbox"]:checked + .autoLogin{
                    background-image: url("../assets/images/chosen.png");
                }
                span{
                    margin-left: .2rem;
                }
            }
            .quickLogin{
                margin-right: .2rem;
                color: #2986de;
            }
        }

        //注册按钮
        .registerBtn{
            background: white;
            color: @mainColor;
            border: 1px solid @mainColor;
            margin-top: 5%;
            &:active{
                background: fade(@mainColor,8%);
            }
        }

        //短信验证码登录按钮
        .phoneLogin{
            .registerBtn();
            letter-spacing: .1rem;
        }

        /************************忘记密码/注册/用户协议*****************************/
        .forgetPwd_register_protocol{
            display: flex;
            flex-direction: column;
            width: 11.2rem;
            margin: 3.6rem auto;
            font-size: .7rem;
            .forgetPwd_register{
                display: flex;
                flex-direction: row;
                justify-content: center;
                font-weight: bold;
                .separator{
                    color: #aaaaaa;
                }
            }
            .space_between{
                justify-content: space-between;
            }
            .protocol{
                color: #aaaaaa;
                font-size: .7rem;
                margin-top: .6rem;
                position: static;
                b{
                    color: black;
                }
            }
        }

        //没有第三方登录时
        .footer{
            position: fixed;
            bottom: 1.4%;
            left: 24.3%;
            right: 24.3%;
        }

        /*********************第三方登录******************/
        .otherLoginWays{
            width: 80%;
            position: fixed;
            bottom: 6.2%;
            left: 10%;
            right: 10%;
            text-align: center;
            .otherWayTextWrapper{
                line-height: 0;
                color: #666666;
                &:before,&:after{
                    position: absolute;
                    background: #cccccc;
                    content: "";
                    height: 1px;
                    width: 30%;
                }
                &:before{
                    left: 0;
                }
                &:after{
                    right: 0;
                }
                .otherWayText{
                    font-size: .8rem;
                    color: #bbbbbb;
                }
            }
            .icons{
                display: flex;
                flex-direction: row;
                justify-content: space-around;
                margin-top: 1.2em;
                img{
                    width: 1.88rem;
                    height: 1.88em;
                }
            }
        }

        .protocol{
            position: fixed;
            bottom: 2%;
            left: 2%;
            right: 2%;
            font-size: .72em;
            margin-top: 8%;
            color: #333333;
            span{
                color: #2986de;
            }
        }
    }
</style>
